<script setup>

</script>

<template>
<!--  <form action="">
  <label for="">用户名</label>
  <input type="text" name="" id="uname">
  <br>
  <label for="">密码</label>
  <input type="password" name="" id="pword">
  <br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
 </form> -->
    <!-- <div class="button-row">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div> -->
   <!--  <el-form
    style="max-width: 600px"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="pass">
      <el-input type="text" autocomplete="off" />
    </el-form-item>

    <el-form-item label="密码" prop="checkPass">
      <el-input
        type="password"
        autocomplete="off"
      />

    </el-form-item>
    <el-form-item>
      <el-button type="primary" >
        提交
      </el-button>
      <el-button >重置</el-button>
    </el-form-item>
  </el-form> -->
  <div class="header">
      <h1>注册新用户</h1>
    </div>
  <el-card style="max-width: 480px">
    <template #header><div class="from-group">
      <label for="username">用户名</label>
      <input type="text" id="username">
    </div>
    <div class="from-group">
      <label for="email">登录邮箱</label>
      <input type="email" id="email">
    </div>
    <div class="from-group">
      <label for="password">密码</label>
      <input type="password" id="password">
    </div>
    <div class="from-group">
      <label for="repassword">再输一次</label>
      <input type="repassword" id="repassword">
    </div></template>
    <div class="from-container">
    
    
    <div class="personal-title">个人资料</div>
    <div class="form-group">
      <label>性别</label>
      <label><input type="radio" name="gender" checked> 男士</label>
      <label><input type="radio" name="gender"> 女士</label>
    </div>
    <div class="form-group">
      <label for="education">学历</label>
      <select id="education">
        <option>本科</option><br/>
        <option>专科</option><br/>
        <option>硕士</option><br/>
        <option>博士</option><br/> 
      </select> 
    </div>       
    <div class="form-group">
      <label for="job">职业</label>
      <select id="job">
        <option>在校学生</option>
        <option>上班族</option>
        <option>自由职业</option><br/>
      </select>
    </div>
    <div class="form-group">
      <label for="city">所在城市</label>
      <select id="city">
        <option>帝都</option>
        <option>魔都</option>
        <option>羊城</option>
      </select>
    </div>
    <div class="form-group">
      <label>出生年月</label>
      <select>
        <option>1985</option>
        <option>1986</option>
        <option>1987</option>
      </select>
      <select style="margin-left: 5px;">
        <option>1月</option>
        <option>2月</option>
        <option>3月</option>
      </select>
    </div>
    <div class="form-group">
      <label>猜你喜欢</label>
      <div class="hobby-group">
        <label><input type="checkbox"> 体育</label>
        <label><input type="checkbox"> 音乐</label>
        <label><input type="checkbox"> 游戏</label>
        <label><input type="checkbox"> 八卦</label>
        <label><input type="checkbox"> 吐槽</label>
      </div>
    </div>
    <div class="agree-group">
      <input type="checkbox" id="agree">
      <label for="agree">我已仔细阅读并接受 <a href=" ">注册条款</a ></label>
    </div><br/>
    <div class="btn-group">
      <button>注册</button>
      <button>重置</button>
    </div>    
  </div>
  </el-card>
</template>

<style scoped>

</style>
